<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue中同时使用过渡和动画</title>
	<script type="text/javascript" src="../js/vue.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/animate.css">
	<style type="text/css">
		.fade-enter, .fade-leave-to {
			opacity: 0;
		}
		.fade-enter-active,
		.fade-leave-active {
			transition: opacity 1s
		}
	</style>
</head>
<body>
	<!-- type="transition" 以transition动画时长为准 -->
	<!-- :duration="5000" 样式五秒隐藏 -->
	<!-- :duration="{enter: 5000, leave: 10000}" 入场5秒出场10秒 -->
	<div id="app">
		<transition 
		    type="transition"
		    :duration="{enter: 5000, leave: 10000}"
		  	name="fade"
		  	appear
			enter-active-class="animated swing fade-enter-active"
			leave-active-class="animated shake fade-leave-active"
			appear-active-class="animated swing"
		>
		<div v-if="show">Hello Vue.js</div>
		</transition>
		<button @click="change">转换</button>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				show: true
			},
			methods: {
				change: function() {
					this.show = !this.show
				}
			}
		})
	</script>
</body>
</html>